<script lang="ts">
  import { convertFileSrc } from "@tauri-apps/api/tauri";

  import { onMount } from "svelte";

  import type { KV } from "$lib/ebm";

  export let attributes: KV[] = [
    {
      k: "poster",
      v: "https://media.vimejs.com/poster.png",
    },
    {
      k: "data_src",
      v: "https://media.vimejs.com/720p.mp4",
    },
    
  ];
  let poster = attributes.find((x) => x.k == "poster");
  let data_src = attributes.find((x) => x.k == "data_src");
  let captions = attributes.find((x) => x.k == "captions");
  console.log("attributes poster=", poster, " data_src=", data_src, " captions=", captions);

  let showPlayer = false;
  let player;

  onMount(async () => {
    const { defineCustomElements } = await import("@vime/core");
    defineCustomElements();
    showPlayer = true;
  });

  const posterlocal = convertFileSrc("/Users/CC/posterlocal.png");
  const datasrclocal = convertFileSrc(
    // "/Users/CC/github/moreadgroup/moread-cloud-data/src/main/resources/listens/magic-ear-8-times/introduction/2/master.m3u8"
    "/Users/CC/github/moreadgroup/moread-cloud-data/src/main/resources/listens/bipbop-advanced/bipbop_16x9_variant.m3u8"
    );
  console.log("posterlocal=", posterlocal, " datasrclocal=", datasrclocal);
</script>

<div class="w-full h-full">
  <div><img alt="poster.png" src={posterlocal} /></div>
  <br /><br />
  {#if showPlayer}
    <vm-player bind:this={player}>
      <vm-hls version="latest" poster={posterlocal}>
        <source data-src={datasrclocal} type="application/x-mpegURL" />
      </vm-hls>

      <!-- We turn off the controls that come with the default UI. -->
      <vm-default-ui no-controls>
        <!-- We setup the default controls and pass in any options.  -->
        <vm-default-controls hide-on-mouse-leave active-duration="2000" />
      </vm-default-ui>
    </vm-player>
  {/if}
</div>
<svelte:head>
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@vime/core@^5/themes/default.css"
  />
</svelte:head>
